<template>
  <div class="user-table-con">
    <Table :columns="columns" :data="data" :loading="loading"></Table>


    <!-- 备注 -->
    <Modal v-model="updateRemarkModal.show" width="360">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>编辑用户备注</span>
      </p>

      <div style="text-align:center">
        <Input :rows="5"
               type="textarea"
               placeholder="请输入需要备注"
               v-model="updateRemarkModal.input"/>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="updateRemarkModal.loading"
                @click="handleUpdateRemark(updateRemarkModal.input, updateRemarkModal.user)" long>
          <span v-if="!updateRemarkModal.loading">更新备注</span>
          <span v-else>请求提交中</span>
        </Button>
      </div>
    </Modal>

    <!-- 编辑 -->
    <Modal v-model="updateUserModal.show" width="360">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>编辑用户信息</span>
      </p>

      <div>
        <Form :model="updateUserModal.form" label-position="top">
          <FormItem label="用户编号">
            <Input v-model="updateUserModal.form.id" disabled/>
          </FormItem>
          <FormItem label="用户名">
            <Input v-model="updateUserModal.form.username" disabled/>
          </FormItem>
          <FormItem label="登录密码">
            <Input type="password" v-model="updateUserModal.form.password" placeholder="如需修改密码请输入新密码"/>
          </FormItem>
          <FormItem label="关联角色">
            <Select v-model="updateUserModal.form.roles" multiple>
              <Option :value="role.id" v-for="role in roleList" :key="role.id">{{role.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="联系电话">
            <Input v-model="updateUserModal.form.phoneNumber"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="updateUserModal.loading" @click="handleUpdateUser(updateUserModal.form)" long>
          <span v-if="!updateUserModal.loading">更新信息</span>
          <span v-else>更新请求提交中</span>
        </Button>
      </div>
    </Modal>

    <!-- 删除 -->
    <Modal v-model="removeUserModal.show" width="360">

      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>确认删除用户</span>
      </p>

      <div style="text-align:center">
        <p>此操作将会删除用户，请确认是否删除？</p>
      </div>

      <div slot="footer">
        <Button type="text" @click="removeUserModal.show=false">取消</Button>
        <Button type="error" :loading="removeUserModal.loading" @click="handleRemoveUser(removeUserModal.user)">
          <span v-if="!removeUserModal.loading">确认删除</span>
          <span v-else>正在删除</span>
        </Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import expandRow from './table-expand.vue';
  import {mapState} from 'vuex'

  export default {
    name: 'UserViewTable',
    props: ['data', 'loading'],
    data() {
      return {
        // 表格列配置
        columns: [
          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(expandRow, {
                props: {
                  row: params.row
                }
              })
            }
          },
          {
            title: '用户编号',
            key: 'id',
            width: 100,
            align: 'center'
          },
          {
            title: '用户名',
            key: 'username',
            align: 'center'
          },
          {
            title: '角色',
            key: 'roleNames',
            align: 'center',
          },
          {
            title: '联系电话',
            key: 'phoneNumber',
            align: 'center'
          },
          {
            title: '备注',
            key: 'remark',
            align: 'center'
          },
          {
            title: '添加时间',
            key: 'createdDate',
            align: 'center'
          },
          {
            title: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.updateRemark(params.row)
                    }
                  }
                }, '备注'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.updateUser(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeUser(params.row)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],

        // 备注更新模态框
        updateRemarkModal: {
          show: false,
          input: '',
          user: null,
          loading: false
        },

        // 用户更新模态框
        updateUserModal: {
          show: false,
          user: {
            roleIds: []
          },
          form: {
            id: 0,
            username: '',
            password: '',
            roles: [],
            phoneNumber: ''
          },
          loading: false
        },
        // 用户删除模态框
        removeUserModal: {
          show: false,
          user: {},
          loading: false
        }
      }
    },
    computed: {
      ...mapState('system', {
        roleList: state => state.user.role.roleList
      })
    },
    methods: {
      // 更新备注
      updateRemark(user) {
        let updateRemarkModal = this.updateRemarkModal;
        updateRemarkModal.show = true
        updateRemarkModal.input = user.remark === '-' ? '' : user.remark
        updateRemarkModal.user = user;
      },
      handleUpdateRemark(newRemark, user) {
        let updateRemarkModal = this.updateRemarkModal;
        updateRemarkModal.loading = true
        this.$emit('on-update-remark', newRemark, user, (status) => {
          if (status) {
            updateRemarkModal.show = false
          }
          updateRemarkModal.loading = false
        })
      },

      // 更新用户信息
      updateUser(user) {
        let updateUserModal = this.updateUserModal;
        updateUserModal.show = true
        updateUserModal.user = user

        // 将用户信息赋值给更新表单
        updateUserModal.form.id = user.id
        updateUserModal.form.username = user.username
        updateUserModal.form.phoneNumber = user.phoneNumber
        // 获取用户角色ID集合

        let roleIds = []
        user.roles.filter(role => {
          roleIds.push(role.id)
        })
        updateUserModal.form.roles = roleIds;

      },
      handleUpdateUser(userForm) {
        let updateUserModal = this.updateUserModal;
        updateUserModal.loading = true
        if (!userForm.password) {
          delete userForm.password
        }
        this.$emit('on-update-user', userForm, (status) => {
          if (status) {
            updateUserModal.show = false
            // 重置表单
            updateUserModal.form = {
              id: 0,
              username: '',
              password: '',
              roles: [],
              phoneNumber: ''
            }
          }
          updateUserModal.loading = false
        })
      },

      // 删除用户
      removeUser(user) {
        let removeUserModal = this.removeUserModal;
        removeUserModal.show = true
        removeUserModal.user = user
      },
      handleRemoveUser(user) {
        let removeUserModal = this.removeUserModal;
        removeUserModal.loading = true;
        this.$emit('on-remove-user', user, (status) => {
            if (status) {
              removeUserModal.show = false
            }
            removeUserModal.loading = false
          }
        )
      }
    }
  }
</script>
